<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表页</title>
    <link rel="stylesheet" href="./scss/header.css">
    <link rel="stylesheet" href="./scss/footer.css">
    <link rel="stylesheet" href="../图标图标/iconfont.css">
    <style>
        section {
            width: 1210px;
            margin: 0 auto;
            /* background-color: orange; */
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        .goods {
            width: 210px;

            float: left;
            box-sizing: border-box;
            padding: 20px 10px;
            margin-top: 10px;
        }
        .goods:hover{
            border: 1px solid orangered;
        }
        .goods:nth-of-type(5n){
                  margin-right: 0;
            }
        .goods img {
            width: 100%;
            cursor: pointer;
        }
        .goods img:hover{
            cursor: pointer;
        }
        .goods h1,
        h2 {
            font-size: 16px;
            line-height: 30px;
            padding: 2px 5px;
            
        }
        .goods h1 {
            overflow: hidden;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            display: -webkit-box;
        }
        .goods h1:hover{
            color: orangered;
            cursor: pointer;
        }
        .goods h2 {
            color: orangered;
        }
        .btn{
            width: 80px;
            height: 30px;
            background-color: #f9f9f9;
            color: #666;
            font-size: 12px;
            border: none;
        }
        .btn:hover{
            background-color: orangered;
            color: #ffff;
        }
    </style>
</head>

<body>
    <!-- 第一部分，头部导航栏 -->
    <header>
        <div class="container">
            <p>收藏</p>
            <ul class="uu">
                <li>
                    <a href="./login.html" class="login">你好，请登录</a>
                    &nbsp;&nbsp;
                    <a href="./register.html" class="regist">免费注册</a>
                </li>
                <li>会员中心</li>
                <li>客户服务</li>
            </ul>
        </div>
    </header>
    <!-- 第二部分，头部搜索部分 -->
    <div class="header-part">
        <!-- 版心 -->
        <div class="header-cen">
            <!-- logo -->
            <div class="logo-img">
                <a href="./shouye.html"><img src="./images/letvlogo.df7e18e.png" alt=""></a>
            </div>
            <!-- 搜索栏 -->
            <div id="serch">
                <div class="serch-int">
                    <input type="text" name="" class="text">
                    <button class="button">搜索</button>
                </div>
                <p>
                    热门搜索：
                    <span>量子点</span>
                    <span>遥控器</span>
                    <span>无限耳机</span>
                </p>
            </div>
            <!-- 购物车 -->
            <h1>
                <span class="iconfont icon-gouwuche"></span>
                <p><a href="">我的购物车</a></p><span class="iconfont icon-triangle-down"></span>
                <div id="shopp">
                    <p>购物车中还没有商品，赶紧选购吧</p>
                </div>
            </h1>
        </div>
    </div>
    <!-- 第三部分，商品分类 -->
    <div class="nav">
        <div class="nav-cen">
            <a href="./goodslist.html">全部商品分类</a>
           
        </div>
    </div>

    <!-- 中间部分，商品列表页 -->
    <section>
        <!-- <div class="goods">
            <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg"
                alt="">
            <h1>南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜P3038</h1>
            <h2>¥25.00</h2>
        </div> -->
    </section>

    <!-- 最后部分，尾部 -->
    <footer style="float: left;">
        <div id="footer-top">
            <div class="top-cont">
                <img src="./images/footer1.jpeg" alt="">
                <img src="./images/footer2.jpeg" alt="">
                <img src="./images/footer3.jpeg" alt="">
                <img src="./images/footer4.jpeg" alt="">
            </div>
        </div>
        <div id="footer-cen">
            <ul>
                <li>
                    <dl>
                        <dt>新手入门</dt>
                        <dd><i></i> <a href="/#/news/article?id=11" title="购物指南">购物指南</a></dd>
                        <dd><i></i> <a href="/#/news/article?id=30" title="发票说明">发票说明</a></dd>
                        <dd><i></i> <a href="/#/news/article?id=47" title="账户安全">账户安全</a></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>帮助中心</dt>
                        <dd><i></i> <a href="/#/news/article?id=9" title="签收必读（超级电视）">签收必读（超级电视）</a></dd>
                        <dd><i></i> <a href="/#/news/article?id=7" title="配送时效">配送时效</a></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>售后服务</dt>
                        <dd><i></i> <a href="/#/news/article?id=31" title="关于电视安装（自营）">关于电视安装（自营）</a></dd>
                        <dd><i></i> <a href="/#/news/article?id=32" title="电视三包政策（自营）">电视三包政策（自营）</a></dd>
                        <dd><i></i> <a href="/#/news/article?id=34" title="电视售后维修政策（自营）">电视售后维修政策（自营）</a></dd>
                        <dd><i></i> <a href="/#/news/article?id=51" title="乐视生态产品售后政策">乐视生态产品售后政策</a></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>特色服务</dt>
                        <dd><i></i> <a href="http://lema.lemall.com/lema.html?alys_id=top&amp;ref=cn:yw_fw_6"
                                title="乐码通道">乐码通道</a></dd>
                        <dd><i></i> <a href="https://lemall.letv.com" title="乐视商城B2B2C商城系统">乐视商城B2B2C商城系统</a></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>关于我们</dt>
                        <dd><i></i> <a href="/#/news/article?id=39" title="公司介绍">公司介绍</a></dd>
                        <dd><i></i> <a href="/#/news/article?id=40" title="联系我们">联系我们</a></dd>
                        <dd><i></i> <a href="/#/news/article?id=41" title="关注我们">关注我们</a></dd>
                        <dd><i></i> <a href="/#/news/article?id=53" title="隐私政策">隐私政策</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div id="footer-rig">
            Copyright © 2004-2020 乐视商城 All rights reserved
            <span> | </span>
            <a href="http://beian.miit.gov.cn" target="_blank" class="license">京ICP备19019019号-1</a>
            <span>|</span>
            <img alt="京公网安备" src="https://i2.letvimg.com/lc06_img/201602/29/16/21/ghs.png">
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502041858" target="_blank"
                class="license">京公网安备：11010502041858号</a>
            <span> | </span>
            <a target="_blank" href="http://img0-lemall.letvimg.com/le-cloud/resource/images/www/201910251813.png"
                class="license">营业执照信息</a>
        </div>
    </footer>

    <script src="./js/jQuery.js"></script>
    <script src="./js/jquery.lazyload.js"></script>
    <script>
        // 页面渲染 : 
        // - 1. 布局; 
        // - 2. 请求数据; 
        // - 3. 拼接数据变成html结构; 
        $(function(){
            let section = $("section");
            
            $(window).ready( function(){
                $.ajax({
                    url : "http://127.0.0.1:8888/goods/list",
                    data : { current :5, pagesize : 100},
                })
                .then(function(data){
                    render(data)
                    // 懒加载
                   $(".lazy").lazyload();
                })
            })
           
            function render( res ){
                console.log(res);
                // innerHTML是原生写法，获取的是数组，给section加上下标
                section[0].innerHTML = res.list.map( 
                    item => 
                        `<div class="goods">
                            <a href="productdetail.html#id=${item.goods_id}">
                                <img src="${ item.img_big_logo }" alt="" class="lazy" data-original=${item.img_big_logo}>
                                <h1>${ item.title }</h1>
                                <h2>¥${ item.price }</h2>
                                <button data-id="${item.goods_id}" class="btn btn-danger btn-small">加入购物车</button>
                            </a>
                         </div>`
                ).join("");
            }
        })
    </script>
</body>

</html>